<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>React 18 快速入门</title>
	</head>
	<body>
		<!-- 1. 创建容器标签 -->
		<div id="app"></div>
		
		
		<!-- 2. 引入React框架 -->
		<script src="./js/react.development.js"></script>
		<script src="./js/react-dom.development.js"></script>
		
		<script>
			// 3. 构建应用
			// 绑定`React`实例root
			let app = document.querySelector("#app")
			let root = ReactDOM.createRoot(app)
			
			// 创建一个新的标签节点
			let small = React.createElement("small", {}, "作者:高鼎")
			let h1 = React.createElement("h1", {id: "title"}, "村居", small)
			
			let p1 = React.createElement("p", {}, "草长莺飞二月天")
			let p2 = React.createElement("p", {}, "拂堤杨柳醉春烟")
			let p3 = React.createElement("p", {}, "儿童散学归来早")
			let p4 = React.createElement("p", {}, "忙趁东风放纸鸢")
			// let div = React.createElement("div",{id: "pea"}, h1, p1, p2, p3, p4)
			
			// 将节点渲染到根节点上
			root.render([h1, p1, p2, p3, p4])
			// 思考；Vue3.x中为什么template标签内部不再强制约束只有一个根节点了？
		</script>
		
	</body>
</html>